<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/department.css">
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../util/jquery-3.4.1.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body id="depart-body">
<div id="depart-box">
    <div id="depart-h1">
        <h2>部门管理</h2>
    </div>
    <div id="depart-none"></div>
    <div id="depart-btn">
        <div class="depart-btn1">
            <button type="button" class="btn btn-primary btn-lg depart-btn3" data-toggle="modal" data-target="#myModal" style="font-size: 16px">
                <span class="glyphicon glyphicon-plus"></span>新增部门
            </button>
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">新增部门</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="inputname" class="col-sm-2 control-label">部门名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inputname" placeholder="部门名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputdescribe" class="col-sm-2 control-label">部门描述</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inputdescribe" placeholder="部门描述">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputcadre" class="col-sm-2 control-label">部门负责人</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inputcadre" placeholder="部门负责人">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputperson" class="col-sm-2 control-label">部门人数</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" id="inputperson" placeholder="部门人数">
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default " data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary depart-add" >确认增加</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div  id="depart-table">
        <table class="table table-bordered ">
            <thead>
            <tr>
                <th style="text-align: center">编号</th>
                <th style="text-align: center">部门名称</th>
                <th style="text-align: center">部门描述</th>
                <th style="text-align: center">部门负责人</th>
                <th style="text-align: center">部门人数</th>
                <th style="text-align: center">查看具体人员</th>
                <th style="text-align: center">操作</th>
            </tr>
            </thead>
            <tbody>
            <!--<tr>-->
            <!--<td>1</td>-->
            <!--<td>行政部</td>-->
            <!--<td>园长</td>-->
            <!--<td>展雨婷</td>-->
            <!--<td>1</td>-->
            <!--<td><button style="font-size: 12px" type="button" class="btn btn-info btn-xs iconfont btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm1">&#xec13;查看</button></td>-->
            <!--<td><button type="button" class="btn btn-danger btn-xs depart_tbbtn" data-toggle="modal" data-target=".bs-example-modal-sm0">&#xe62f;删除-->
            <!--</button>-->
            <!--</td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>2</td>-->
            <!--<td>教育部</td>-->
            <!--<td>幼儿园教师</td>-->
            <!--<td>王芳</td>-->
            <!--<td>20</td>-->
            <!--<td><button style="font-size: 12px" type="button" class="btn btn-info btn-xs iconfont btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm1">&#xec13;查看</button></td>-->
            <!--<td><button type="button" class="btn btn-danger btn-xs depart_tbbtn" data-toggle="modal" data-target=".bs-example-modal-sm0">&#xe62f;删除-->
            <!--</button></td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>3</td>-->
            <!--<td>财务部</td>-->
            <!--<td>负责园内各项开支的核算工作</td>-->
            <!--<td>刘岚</td>-->
            <!--<td>3</td>-->
            <!--<td><button style="font-size: 12px" type="button" class="btn btn-info btn-xs iconfont btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm1">&#xec13;查看</button></td>-->
            <!--<td><button type="button" class="btn btn-danger btn-xs depart_tbbtn" data-toggle="modal" data-target=".bs-example-modal-sm0">&#xe62f;删除-->
            <!--</button></td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>4</td>-->
            <!--<td>后勤部</td>-->
            <!--<td>管理师生生活需求及设备维修</td>-->
            <!--<td>万永明</td>-->
            <!--<td>4</td>-->
            <!--<td><button style="font-size: 12px" type="button" class="btn btn-info btn-xs iconfont btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm1">&#xec13;查看</button></td>-->
            <!--<td><button type="button" class="btn btn-danger btn-xs depart_tbbtn" data-toggle="modal" data-target=".bs-example-modal-sm0">&#xe62f;删除-->
            <!--</button></td>-->
            <!--</tr>-->
            <!--<tr>-->
            <!--<td>5</td>-->
            <!--<td>保卫科</td>-->
            <!--<td>负责全园安保等工作</td>-->
            <!--<td>张昌民</td>-->
            <!--<td>6</td>-->
            <!--<td><button style="font-size: 12px" type="button" class="btn btn-info btn-xs iconfont btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm1">&#xec13;查看</button></td>-->
            <!--<td><button type="button" class="btn btn-danger btn-xs depart_tbbtn" data-toggle="modal" data-target="#myModal">&#xe62f;删除-->
            <!--</button></td>-->
            <!--</tr>-->
            <!--<div class="modal fade" id="deleteSelection" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">-->
            <!--<div class="modal-dialog" role="document">-->
            <!--<div class="modal-content">-->
            <!--<div class="modal-header">-->
            <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
            <!--<h4 class="modal-title" id="myDeleteSelection">删除部门</h4>-->
            <!--</div>-->
            <!--<div class="modal-body">-->
            <!--<form class="form-horizontal">-->
            <!--<div class="form-group">-->
            <!--<h3 class="modal-title" >是否删除部门</h3>-->
            <!--</div>-->
            <!--</form>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="modal-footer">-->
            <!--<button type="button" class="btn btn-default depart-no " data-dismiss="modal">考虑一下</button>-->
            <!--<button type="button" class="btn btn-primary depart-yes " >确认删除</button>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            </tbody>
        </table>

    </div>
    <div class="row bn_button" id="depart-nextPage">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right bn_next ">
            <ul class="pagination bn_next_btn">
                <!--<li><a href="#">&laquo;</a></li>-->
                <!--<li><a href="#">1</a></li>-->
                <!--<li><a href="#">2</a></li>-->
                <!--<li><a href="#">3</a></li>-->
                <!--<li><a href="#">4</a></li>-->
                <!--<li><a href="#">5</a></li>-->
                <!--<li><a href="#">&raquo;</a></li>-->
            </ul>
        </div>
    </div>
    <div>
        <div class="modal fade" id="deleteSelection" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myDeleteSelection">是否确认删除部门</h4>
                    </div>
                    <div class="modal-footer">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <button type="button" class="btn btn-default depart-no " data-dismiss="modal">考虑一下</button>
                                <button type="button" class="btn btn-primary depart-yes " data-dismiss="modal" style="background: red;border:red" >确认删除</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var oInputName=$('#inputname');  //获取部门名称
    var oInputDescribe=$('#inputdescribe'); //获取部门描述
    var oInputCadre=$('#inputcadre'); //获取部门负责人
    var oInputPerson=$('#inputperson');  //获取部门人数
    var oDepartAdd=$('.depart-add');   //获取增加
    var oDepartTable=$('#depart-table');   //表格的增加和删减
    var oDepartNextPage=$('#depart-nextPage'); //下一页

    //创建模拟样式
    var pmarr=JSON.parse(localStorage.getItem('pmdata')) || [];
    var index=JSON.parse(localStorage.getItem('index')) || 0;
    var res=[]; //最终渲染的数据

    function render(){
        oDepartTable.find('tbody').html('');
        for(var i=0;i<res.length;i++){
            oDepartTable.find('tbody').append('<tr data-index="'+res[i]+'.index">\n' +
                '                <td>'+(i+1)+'</td>\n' +
                '                <td>'+res[i].on+'</td>\n' +
                '                <td>'+res[i].os+'</td>\n' +
                '                <td>'+res[i].oc+'</td>\n' +
                '                <td>'+res[i].op+'</td>\n' +
                '                <td>\n' +
                '                    <button style="font-size: 12px" type="button" class="btn btn-info btn-xs iconfont btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm1">&#xec13;查看</button>\n' +
                '                </td>\n' +
                '                <td>\n' +
                '                    <button type="button" class="btn btn-danger btn-xs depart_tbbtn" data-toggle="modal" data-target="#deleteSelection">&#xe62f;删除 </button>\n' +
                '                </td>\n'+
                '            </tr>');
        };

        localStorage.setItem('pmdata',JSON.stringify(pmarr));
        localStorage.setItem('index',index);
    };

    //删除
    var delNum;
    $('table').on('click','.depart_tbbtn',function () {

        // $(this).parents('tr').remove()
        delNum = $(this).parents('tr').find('td').eq(1).html();
        $('#deleteSelection').show()
    });
    $('.depart-yes').click(function () {
        for (var i = 0; i < pmarr.length; i ++){
            if (delNum == pmarr[i].on) {
                pmarr.splice(i, 1);
            }
        }

        getPageNum();
        getPageData(1);
    });


    //增加
    oDepartAdd.click(function() {
        index++;
        /*判断这里的val值是否为空，如数据不完整，不能添加arr*/
        if (oInputName.val()== '' || oInputDescribe.val() == '' || oInputCadre.val() == '' || oInputPerson.val() == '') {
            alert('请完善数据');
            // arr.splice()
        }
        else {
            //往后添加
            pmarr.push({
                on: oInputName.val(),
                os: oInputDescribe.val(),
                oc: oInputCadre.val(),
                op: oInputPerson.val(),
                index:index
            });
        };
        $('#myModal').modal('hide');
        oInputName.val('');
        oInputDescribe.val('');
        oInputCadre.val('');
        oInputPerson.val('');
        getPageNum();
        getPageData(1);
    });



    //获取有多少页码
    function getPageNum() {
        var pageNum=Math.ceil(pmarr.length/5);

        oDepartNextPage.html('');

        for(var i=0;i<pageNum;i++){

            var oLi=$('<li>'+(i+1)+'</li>');

            oDepartNextPage.append(oLi);

            if(i==0){
                oLi.addClass('active');
            }
        }
    }
    getPageNum();
    //获取某一页的数据
    function getPageData(index) {
        res=pmarr.slice((index-1)*5,5*index);
        render();
    }
    getPageData(1);
    //点击页码 获取当页的数据
    oDepartNextPage.on('click','li',function () {
        getPageData($(this).html());

        $(this).addClass('active').siblings('li').removeClass('active');

    })
</script>
</body>
</html>

